<template>
  <div>
    <el-button type="primary" @click="getData">获取数据</el-button>
    <el-button type="success" @click="submit">提交</el-button>
    <el-table
      :data="tableData"
      @row-click="editTable"
      stripe
      highlight-current-row
      class="tb-edit"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
const tableData = [{
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}, {
  date: '2016-05-04',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1517 弄'
}, {
  date: '2016-05-01',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1519 弄'
}, {
  date: '2016-05-03',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1516 弄'
}]
export default {
  data () {
    return {
      tableData: [],
      tableDataValue: _.cloneDeep(tableData)
    }
  },

  created: function () {

  },
  mounted: function () {

  },
  methods: {
    getData () {
      this.tableData = this.tableDataValue
    },

    submit () {
      console.log(this.tableData)
    },

    editTable (row, event, column) {
      // console.log(row, event, column, event.currentTarget)
    },

    handleEdit (index, row) {
      console.log(index, row)
    }
  },
  watch: {}
}
</script>

<style lang='scss' scoped type="text/css">
  .tb-edit .el-input {
    display: none;
  }
  .tb-edit .current-row .el-input {
    display: block;
  }
  .tb-edit .current-row .el-input+span {
    display: none;
  }
</style>
